<template>
    <div class="list_box top10">
        <div class="list_title">
          <div class="list_title_item">{{ t('address') }}</div>
          <div class="list_title_item">{{ t('time') }}</div>
          <div class="list_title_item">{{ t('rewardAmount') }}</div>
        </div>
        <template v-if="listData&&listData.length>0">
        <div class="list_item_box" v-for="(item,index) in listData" :key="index">
          <div class="list_item">{{ splitAddress( item.address) }}</div>
          <div class="list_item">{{ item.time }}</div>
          <div class="list_item list_light">{{item.amount}} Vollar</div>
        </div>
      </template>
      <div v-else class="no_data"> {{ t('no_data') }} </div>
      </div>
      
</template>
<script setup>
import { splitAddress } from "@/utils/index.js";
import { useStore } from "vuex";
import { ref, reactive, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
const props = defineProps({
  title: {
    type: [String, Number],
    default: '',
  },
  value: {
    type: [String, Number],
    default: '',
  },
  listData:{
    type:[Array,Object],
    default:()=>{
      return []
    }
  }
})
const goToPage = (value) => {
  router.push({
    name: value
  })
}
</script>
<style lang="scss" scoped>
.list_box{
  width: 100%;
 
  .list_title{
    width: 100%;
    background: #f50300;
    display: flex;
    align-items: center;
  }
  .list_title_item{
    width: 33.33%;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.list_item_box{
  width: 100%;
    display: flex;
    align-items: center;
    background: #121b22;

  .list_item{
    width: 33.33%;
    color: #999;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .list_light{
    color: #f50300;
  }
 
}

</style>
  